<template>
    <div class="flexcenter">
        <div class="max_width paddingtb">
            <!-- 论坛列表 -->
            <div class="ffffff radius padding_bottom">
                <div class="mainpadding">
                    <div class="flex padding_bottom line_bottom">
                        <img class="imgBox margin_right1" :src="forumInfo.user.avatar" alt="">
                        <div>
                            <div class="text_ft color_three">{{ forumInfo.user.nickname }}</div>
                            <div class="text_b color_nine margin_top1">{{ forumInfo.createtime_text }}</div>
                            <div class="margin_top2 text_f color_zero word_wrap lianghang">
                                {{ forumInfo.title }}
                            </div>
                            <div class="margin_top2 text_f color_three word_wrap">
                                {{ forumInfo.description }}
                            </div>
                            <div class="flexleft flex_wrap">
                                <div class="img_box margin_top2" v-for="(value, i) in forumInfo.images_arr" :key="i">
                                    <img :src="value" alt="">
                                </div>
                            </div>
                            <div class="flexleft margin_top2">
                                <i class="el-icon-chat-line-square margin_right1"></i>
                                <span class="text_d color_six">{{ forumInfo.comment_num }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="margin_left6">
                        <!-- 输入框 -->
                        <div class="inputBox">
                            <!-- <input style="width: 100%;" type="text" placeholder="回复内容" v-model="content" :autofocus="focusState" @blur="focusState=false"> -->
                            <el-input placeholder="回复内容" clearable v-model="content" ref="inputRef"></el-input>
                        </div>
                        <div class="flexright margin_top2">
                            <div class="themeBtnbr" @click="releaseComm">发布</div>
                        </div>
                        <!-- 评论列表 -->
                        <div class="flex margin_top2" v-for="item in list.data" :key="item.id">
                            <img class="commImg margin_right1" :src="item.user.avatar" alt="">
                            <div class="flex1">
                                <div class="flexbetween" style="margin-top: 5px;">
                                    <div class="text_b color_three">{{ item.user.nickname }}</div>
                                    <div class="text_b color_nine" @click="replyComm(item.id)">回复</div>
                                </div>
                                <div class="text_d color_three margin_top1">{{ item.content }}</div>
                                <div class="text_b color_nine margin_top1">{{ item.createtime_text }}</div>
                                <!-- 二级评论 -->
                                <div class="margin_left2 fafafa padding15 margin_top2 flex" v-for="value in item.children"
                                    :key="value.id">
                                    <img class="commImg margin_right1" :src="value.replyuser.avatar" alt="">
                                    <div class="flex1">
                                        <div class="flexbetween" style="margin-top: 5px;">
                                            <div class="text_b color_three">{{ value.replyuser.nickname }}</div>
                                            <!-- <div class="text_b color_nine">回复</div> -->
                                        </div>
                                        <div class="text_d color_three margin_top1">{{ value.content }}</div>
                                        <div class="text_b color_nine margin_top1">{{ value.createtime_text }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flexcenter margin_top" v-if="list.total > 14">
                            <el-pagination background layout="prev, pager, next" :page-size="14" :total="list.total"
                                @current-change="listChange">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 发布论坛弹窗 -->
        <el-dialog title="发布论坛" :visible.sync="dialogVisible" width="30%" center top="20vh" :before-close="handleClose">
            <div class="flexleft">
                <div class="text_d color_zero margin_right1 white_nowrap">文章标题：</div>
                <el-input v-model="title" placeholder="请输入标题"></el-input>
            </div>
            <div class="flex margin_top2">
                <div class="text_d color_zero margin_right1 margin_top1 white_nowrap">文章描述：</div>
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" show-word-limit
                    maxlength="150" placeholder="请输入描述内容" v-model="description">
                </el-input>
            </div>
            <div class="flex margin_top2">
                <div class="text_d color_zero margin_right1 margin_top1 white_nowrap">上传图片：</div>
                <el-form label-width="0px">
                    <el-form-item>
                        <el-upload :headers="{
                            'Token': tokens
                        }" class="avatar-uploader" :limit="8"
                            action="http://kaoshi.kongzhongwangluo.top/api/common/upload" :show-file-list="false" multiple
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-exceed="handleExceed">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                        <font class="upload-text">只能上传jpg/png文件，且不超过10MB，最多可以上传8张图片</font>
                    </el-form-item>
                    <el-form-item>
                        <ul class="flexleft">
                            <li v-for="(item, index) in ossFileUploads" :key="index" style="position: relative;"
                                class="noImage margin_right1 pointer">
                                <img :src="item.filePath.fullurl" class="noImage"
                                    @click.stop="dialogVisible = true; dialogImageUrl = item.filePath.fullurl;">
                                <i style="color: #3478f5;position: absolute;top: 5px;right: 5px;font-size: 16px;"
                                    class="el-icon-circle-close " @click.stop="handlerDel(item, index)"></i>
                            </li>
                        </ul>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="submit()">立即发布</el-button>
            </span>
        </el-dialog>
        <!-- 禁止发布论坛弹窗 -->
        <el-dialog title="禁止发布" :visible.sync="noDialogVisible" width="35%" center top="30vh" :before-close="NoHandleClose">
            <div class="textcenter text_f color_three">
                <span>由于您违反平台规定，现对您处以禁止发布</span>
                <span class="color_red">60小时</span>
                <span>处罚！</span>
            </div>
            <!-- 处罚倒计时 -->
            <div class="flexcenter margin_top">
                <div class="text_d color_red">处罚倒计时：</div>
                <div class="flexleft">
                    <div class="flexleft">
                        <div class="timeBox">40</div>
                        <div class="text_d color_red">:</div>
                    </div>
                    <div class="flexleft">
                        <div class="timeBox">40</div>
                        <div class="text_d color_red">:</div>
                    </div>
                    <div class="flexleft">
                        <div class="timeBox">56</div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="noDialogVisible = false">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getForumInfo, getComm, getPublush, getReleaseComm
} from "@/API/forum"
export default {
    data() {
        return {
            dialogVisible: false, //发布
            noDialogVisible: false, //禁止发布
            forumInfo: {},//论坛详情
            list: {
                data: []
            },//评论列表
            ossFileUploads: [], //图片
            tokens: "",
            title: "",//标题
            description: "",//描述
            id: "",//论坛id
            content: "",//回复内容
            pid: "",//回复id
        }
    },
    watch: {
        focusState(newVal) {
            console.log(newVal, "发生改变了")
        }
    },
    async created() {
        this.tokens = localStorage.getItem("token")
        this.id = this.$route.query.id
        this.getForumInfo()
        this.getCommList()
    },
    methods: {
        async getForumInfo() { //论坛详情
            let res = await getForumInfo({
                id: this.id
            })
            this.forumInfo = res.data.data
        },
        async getCommList(page) { //评论列表
            let res = await getComm({
                page: page || 1,
                community_id: this.id
            })
            this.list = res.data.data
            this.list.data = res.data.data.data
        },
        listChange(val) {
            console.log(val)
            this.getCommList(val)
        },
        // 上传图片
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是jpg或者png格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleAvatarSuccess(res, file) {
            if (res.code !== 1) {
                this.$message.error(res.msg);
                return false;
            }
            // 图片上传成功，添加到图片数组中，进行渲染
            this.ossFileUploads.push({
                filePath: res.data,
                type: "blood",
                dataId: file.uid
            })
            this.$message.success('上传成功')
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 8 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        // 删除图片
        handlerDel(item, index) {
            this.ossFileUploads.splice(index, 1)
            this.$message.success('删除成功')
        },
        async submit() { //发布论坛
            if (!this.title) {
                this.$message.error("请输入标题")
                return false
            }
            if (!this.description) {
                this.$message.error("请输入描述")
                return false
            }
            let arr = []
            this.ossFileUploads.forEach(item => {
                arr.push(item.filePath.url)
            })
            let res = await getPublush({
                title: this.title,//标题
                description: this.description,//描述
                images: arr.join()
            })
            if (res.data.code == 1) {
                this.$message.success(res.data.msg)
                this.title = ""
                this.description = ""
                this.ossFileUploads = []
            } else {
                this.$message.error(res.data.msg)
            }
            this.dialogVisible = false
        },
        replyComm(pid) {
            this.$refs.inputRef.focus()
            this.pid = pid
        },
        async releaseComm() { //发布评论
            let res = await getReleaseComm({
                community_id: this.id,//论坛id
                content: this.content,//评论内容
                pid: this.pid,//回复id
            })
            if (res.data.code == 1) {
                this.$message.success(res.data.msg)
                this.content = ""
                this.pid = ""
                this.getCommList()
            } else {
                this.$message.error(res.data.msg)
            }
        },
        handleClose(done) {
            done();
        },
        NoHandleClose(done) {
            done();
        },
        goMineRelease() { //我的发布
            this.$router.push({
                path: "/forum/mineRelease"
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/* 论坛列表 */
.imgBox {
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
}

.img_box {
    width: 20%;
    display: flex;
    justify-content: flex-start;

    img {
        width: 121px;
        height: 122px;
        border-radius: 9px 9px 9px 9px;
    }
}

.inputBox {
    // padding: 15px;
    margin-top: 30px;
    background: rgba(217, 217, 217, 0.1);
    border-radius: 4px 4px 4px 4px;
    // border: 1px solid #E2DEDE;
}

.commImg {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* 操作 */
.userImg {
    width: 41px;
    min-width: 41px;
    height: 41px;
    border-radius: 50%;
}

.release {
    padding: 10px;
    text-align: center;
    background: #3478F5;
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
}

.mineRelease {
    /* // width: 100%; */
    padding: 10px;
    text-align: center;
    background: rgba(52, 120, 245, 0.1);
    border-radius: 8px 8px 8px 8px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #3478F5;
}

::v-deep .el-dialog {
    border-radius: 8px;
}

::v-deep .el-dialog__title {
    font-size: 20px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #000000;
}

::v-deep .el-button {
    width: 244px;
    /* // height: 38px; */
    background: #3478F5;
    border-radius: 4px 4px 4px 4px;
    font-size: 12px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #FFFFFF;
}

.noImage {
    width: 76px;
    min-width: 76px;
    height: 76px;

    img {
        width: 100%;
        height: 100%;
    }
}

/* 处罚倒计时 */
.timeBox {
    padding: 2px;
    background: #FF0000;
    border-radius: 2px 2px 2px 2px;
    font-size: 14px;
    font-family: DIN Next LT Pro-Regular, DIN Next LT Pro;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 2px;
}
</style>